<template>
	<view class="car-view">
		<!-- 已绑定的车辆列表 -->
		<view class="car-list" v-show="!isAddStatus">
			<view class="car-list-item" v-for="(item,index) in vehicleList">
				<view class="item-btn">
					<a @click='changeEdit(index)' v-show="!item.isEdit">编辑</a>
					<a @click='putChangeEdit(index)' v-show="item.isEdit">修改</a>
					<a @click="deleteCar(item.id)">删除</a>
				</view>
				<p>车牌号</p>
				<input type="text" v-model="item.plateNo" :disabled="!item.isEdit">
				<p>引擎编号</p>
				<input type="text" v-model="item.engineNo" :disabled="!item.isEdit">
				<p>车辆类型</p>
				<input type="text" v-model="item.type" :disabled="!item.isEdit">
			</view>
		</view>
		<!-- 绑定新的车辆 -->
		<view class="car-add" v-show="isAddStatus">
			<input class="" v-model="formData.plateNo" placeholder="请输入车牌号" />
			<input class="" v-model="formData.engineNo" placeholder="请输入引擎编号" />
			<radio-group class="car-type" @change="plateTypeChange">
				<label class="car-type-label" v-for="(item,index) in plateTypeItems" :key="index">
					<view>
						<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
					</view>
					<view>
						<label class="" :for="item.name">
							<text>{{item.name}}</text>
						</label>
					</view>
				</label>
			</radio-group>
			<a @click="bindingCar">绑定</a>
		</view>
		<!-- 底部导航栏模块 -->
		<BottomTabbar :items="tabbarItems"></BottomTabbar>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/request.js"
	import {
		items
	} from "./tabBatItems.js"
	export default {
		data() {
			return {
				tabbarItems: items,
				vehicleList: [],
				isAddStatus : false,
				plateTypeItems: [{
					name: "小型汽车",
					checked: true
				}, {
					name: "大型新能源汽车",
					checked: false
				}, {
					name: "大型汽车",
					checked: false
				}, {
					name: "小型新能源汽车",
					checked: false
				}, {
					name: "领馆汽车",
					checked: false
				}, {
					name: "警用汽车",
					checked: false
				}, ],
				formData: {
					engineNo: '',
					plateNo: '',
					type: '小型汽车'
				},
			}
		},
		onBackPress() {
			uni.switchTab({
				url: "../index/index"
			})
			return true
		},
		created() {
			// 获取基础内容
			http({
				url: "/prod-api/api/traffic/car/list"
			}).then((res) => {
				// 当没有内容时直接显示添加模块
				if(res.data.rows.length === 0 ){
					return this.isAddStatus = true
				}
				res.data.rows.forEach((x) => {
					x.isEdit = false
				})
				this.vehicleList = res.data.rows
			})
		},
		// 触发顶部按钮
		onNavigationBarButtonTap: function(e) {
			this.isAddStatus = !this.isAddStatus
		},
		methods: {
			// 类型切换
			plateTypeChange: function(e) {
				this.formData.type = e.target.value
			},
			// 绑定车辆
			bindingCar: function() {
				console.log(this.formData)
				http({
					url: "/prod-api/api/traffic/car",
					method: "post",
					data: this.formData
				}).then((res) => {
					uni.showToast({
						icon: "success",
						title: "绑定成功"
					})
					this.isAddStatus = false
				})
			},
			// 点击编辑内容
			changeEdit: function(index) {
				this.vehicleList[index].isEdit = true
			},
			// 提交修改内容
			putChangeEdit: function(index) {
				http({
					url: "/prod-api/api/traffic/car",
					method: "put",
					data: {
						"id": this.vehicleList[index].id,
						"engineNo": this.vehicleList[index].engineNo,
						"plateNo": this.vehicleList[index].plateNo,
						"type": this.vehicleList[index].type
					}
				}).then((res) => {
					uni.showToast({
						icon: "success",
						title: "修改成功",
					})
					this.vehicleList[index].isEdit = false
				})
			},
			// 删除车辆
			deleteCar: function(id) {
				http({
					url: `/prod-api/api/traffic/car/${id}`,
					method: "delete",
				}).then((res) => {
					uni.showToast({
						icon: "success",
						title: "删除成功"
					})
				})
			}
		}
	}
</script>

<style scoped>
	.car-view {
		margin-bottom: 5rem;
	}

	/* 已绑定的车辆信息展示 */
	.car-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 1rem;
		min-width: 100vw;
		max-width: 100vw;
		box-sizing: border-box;
	}

	.car-list>*+* {
		margin-top: 1rem;
	}

	.car-list-item {
		display: flex;
		flex: 1;
		min-width: 100%;
		min-height: 0;
		flex-direction: column;
		justify-content: center;
		gap: .5rem;
		padding: 0 1rem .5rem 1rem;
		background-color: aliceblue;
		border-radius: 10px;
		box-sizing: border-box;
	}

	.car-list-item>.item-btn {
		display: flex;
		align-self: flex-end;
	}

	.car-list-item>.item-btn>a {
		padding: .5rem;
	}

	.car-list-item>.item-btn>a+a {
		margin-left: .5rem;
	}

	/* 绑定输入框 */
	.car-add {
		display: flex;
		flex-direction: column;
		padding: 1rem;
	}

	.car-add>input {
		height: 3rem;
		line-height: 3rem;
		margin-top: .5rem;
		padding-left: 1rem;
		border-radius: 10px;
		background-color: antiquewhite;
	}

	.car-add>a {
		align-self: center;
		width: 3rem;
		height: 2rem;
		line-height: 2rem;
		padding: .5rem;
		text-align: center;
		border-radius: 10px;
		background-color: #cccccc;
	}

	.car-type {
		display: flex;
		gap: .5rem;
		flex-wrap: wrap;

	}

	.car-type-label {
		display: flex;
		padding: .5rem;
	}
</style>
